<template>
  <div>
    <div class="bread">
      <div class="wrap">
        <span @click="goto('../index/index')">产品中心</span>
        <span class="arrow">＞</span>
        <span class="active">购物车</span>
      </div>
    </div>
    <div class="head">
      <span style="margin-left: 40px">商品</span>
      <span style="margin-left: 480px">合同单价</span>
      <span style="margin-left: 94px">数量</span>
      <span style="margin-left: 292px">小计</span>
      <span style="margin-left: 102px">操作</span>
    </div>
    <div class="list">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div
          class="checkbox"
          :class="item.selected ? 'checked' : ''"
          @click="selectProduct(index)"
        >
          √
        </div>
        <div class="pic">
          <img :src="item.proPicList[0]" mode="heightFix" />
        </div>
        <div class="name">{{ item.name }}</div>
        <div class="attrs">
          <div
            class="attrs-item"
            v-for="(oitem, oindex) in item.productAttr"
            :key="oindex"
          >
            {{ oitem.name }}：{{ oitem.value }}
          </div>
        </div>

        <div class="price">${{ item.price }}</div>
        <div class="number">
          <div
            class="minus"
            @click="list[index].num = Math.max(0, item.num - 1)"
            :class="item.num == 0 ? 'disable' : ''"
          >
            -
          </div>
          <input type="number" :value="item.num" class="total" />
          <div class="plus" @click="list[index].num = item.num + 1">+</div>
        </div>
        <div class="warehouse hide">剩余库存：{{ item.stock }}</div>
        <div class="total-price">${{ item.sumPrice }}</div>
        <img
          src="@/assets/imgs/trash.png"
          class="trash"
          @click="deleteProduct(item)"
        />
      </div>
    </div>
    <div class="bottom">
      <div class="wrap">
        <div
          class="checkbox"
          :class="selectAll ? 'checked' : ''"
          @click="
            selectAll = !selectAll
            list.map(item => (item.selected = selectAll))
          "
        >
          √
        </div>
        <div
          class="all"
          @click="
            selectAll = true
            list.map(item => (item.selected = selectAll))
          "
        >
          全选
        </div>
        <div class="delete" @click="deleteAllProduct">删除</div>
        <div class="total">合计 ${{ getTotalPrice() }}</div>
        <div class="memo">已选择 {{ getTotalNumber() }} 件商品（不含运费）</div>
        <div class="go" @click="$router.back()">继续选购</div>
        <div
          class="service"
          @click="ifUser() ? createOrder() : (showOrder = true)"
        >
          <img src="@/assets/imgs/service.png" class="icon" />
          <block v-if="orderId">添加商品</block>
          <block v-else>
            {{ ifUser() ? '创建订单' : '客服询价' }}
          </block>
        </div>
      </div>
    </div>
    <contact v-if="showOrder" @closeModel="closeModel" :list="list" />
  </div>
</template>

<script>
import contact from '../common/contact.vue'
export default {
  components: {
    contact
  },
  data() {
    return {
      showOrder: false,
      list: [],
      selectAll: false,
      exToken: '',
      orderId: ''
    }
  },
  onLoad() {
    this.exToken = uni.getStorageSync('exToken')
    this.orderId = uni.getStorageSync('orderId')

    this.getCartList()
  },
  methods: {
    closeModel(data) {
      this.showOrder = data
    },
    selectProduct(index) {
      this.list[index].selected = !this.list[index].selected
      const checkedItems = this.list.filter(item => item.selected)
      if (checkedItems.length == this.list.length) {
        this.selectAll = true
      } else {
        this.selectAll = false
      }
      this.$forceUpdate()
    },
    addToCart(num, productId, productSeriesId) {
      uni.request({
        url: this.apiUrl + 'productApi/addOrUpdateToCart',
        method: 'POST',
        header: {
          Authorization: this.getToken()
        },
        data: {
          num,
          productId,
          productSeriesId
        },
        success: res => {
          if (num == 0) {
            this.showToast('已删除')
          } else {
            this.showToast('已添加购物车')
          }
          this.getCartList()
        },
        complete: () => {}
      })
    },

    getCartList() {
      uni.request({
        url: this.apiUrl + 'productApi/getCartList',
        method: 'GET',
        header: {
          Authorization: this.getToken()
        },
        success: res => {
          this.list = res.data.data
          this.list.map((item, index) => {
            this.list[index].selected = false
          })
        },
        complete: () => {}
      })
    },
    getTotalPrice() {
      let total = 0
      this.list
        .filter(item => item.selected)
        .map(item => (total = total + item.num * item.price))
      return total
    },
    getTotalNumber() {
      let total = 0
      this.list
        .filter(item => item.selected)
        .map(item => (total = total + item.num))
      return total
    },
    ifUser() {
      return !!this.exToken
    },
    deleteProduct(item) {
      this.addToCart(0, item.productId, item.productSeriesId)
      const self = this
      setTimeout(() => {
        self.getCartList()
      }, 500)
    },

    deleteAllProduct() {
      const self = this
      this.list.forEach((item, index) => {
        this.addToCart(0, item.productId, item.productSeriesId)
        this.selectAll = false
        this.list.map(item => (item.selected = this.selectAll))
        setTimeout(() => {
          self.getCartList()
        }, 500)
      })
    },
    createOrder() {
      const self = this
      const selectedList = self.list.filter(item => item.selected)
      if (selectedList.length == 0) {
        self.showToast('您还没有选择商品')
        return false
      }
      const shoppingCarVOList = selectedList.map(item => {
        return {
          num: item.num,
          productSeriesId: item.productSeriesId,
          productId: item.productId,
          price: item.price
        }
      })
      const data = {
        shoppingCarVOList
      }

      if (!!self.orderId) {
        data.id = self.orderId
      }

      uni.request({
        url: self.apiUrl + 'productApi/createOrder',
        method: 'POST',
        header: {
          Authorization: self.getToken()
        },
        data: data,
        success: res => {
          if (res.data.code === 0) {
            self.showToast('订单创建成功')
            self.getCartList()
          } else {
            self.showToast(res.data.msg)
          }
          self.closeModal()
        },
        complete: () => {}
      })
    }
  }
}
</script>

<style lang="scss">
.head {
  width: 1200px;
  margin: 0 auto;
  margin-top: 42px;
  font-size: 14px;
  font-weight: 400;
  color: #535353;
  line-height: 14px;
}

.list {
  width: 1200px;
  margin: 0 auto;
  border-top: 1px solid #dddddd;
  margin-top: 20px;
  padding-bottom: 124px;

  .item {
    height: 172px;
    border-bottom: 1px solid #dddddd;
    position: relative;

    .checkbox {
      width: 24px;
      height: 24px;
      background: #ffffff;
      border: 1px solid #dddddd;
      position: absolute;
      top: 74px;
      left: 0;
      text-align: center;
      line-height: 24px;
      color: #ffffff;
    }

    .checkbox.checked {
      background-color: #ff590f;
      border: 1px solid #ff590f;
    }

    .pic {
      width: 124px;
      height: 124px;
      background: #ffffff;
      border: 1px solid #dddddd;
      position: absolute;
      top: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      left: 40px;

      image {
        width: 103px;
        height: 119px;
        background-color: gray;
      }
    }

    .name {
      font-size: 16px;
      font-weight: 600;
      color: #222222;
      position: absolute;
      top: 32px;
      left: 196px;
      line-height: 1;
    }

    .attrs {
      position: absolute;
      top: 60px;
      left: 196px;
      height: 80px;
      overflow-y: hidden;

      .attrs-item {
        font-size: 14px;
        font-weight: 400;
        color: #535353;
        line-height: 20px;
      }
    }

    .price {
      font-size: 18px;
      font-weight: 600;
      color: #222222;
      line-height: 18px;
      position: absolute;
      top: 79px;
      left: 550px;
    }

    .number {
      display: inline-flex;
      align-items: center;
      position: absolute;
      top: 52px;
      left: 698px;

      .minus,
      .plus {
        width: 42px;
        height: 42px;
        border: 1px solid #dddddd;
        text-align: center;
        display: inline-block;
        line-height: 38px;
        font-size: 24px;
      }

      .total {
        height: 42px;
        width: 64px;
        line-height: 40px;
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        text-align: center;
        display: inline-block;
        font-size: 16px;
        font-weight: 600;
        color: #17183b;
      }

      .disable {
        background-color: #dddddd;
      }
    }

    .warehouse {
      font-size: 14px;
      font-weight: 400;
      color: #535353;
      line-height: 14px;
      position: absolute;
      top: 106px;
      left: 698px;
    }

    .total-price {
      font-size: 16px;
      font-weight: 600;
      color: #ff590f;
      line-height: 16px;
      position: absolute;
      top: 78px;
      left: 1018px;
    }

    .trash {
      width: 24px;
      height: 24px;
      position: absolute;
      top: 78px;
      right: 33px;
      cursor: pointer;
    }
  }
}

.bottom {
  width: 100%;
  height: 112px;
  background: #f5f5f7;

  .wrap {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    font-size: 14px;
    font-weight: 400;
    color: #222222;
    line-height: 14px;

    .checkbox {
      width: 24px;
      height: 24px;
      background: #ffffff;
      border: 1px solid #dddddd;
      position: absolute;
      top: 44px;
      left: 0;
      text-align: center;
      line-height: 24px;
      color: #ffffff;
    }

    .checkbox.checked {
      background-color: #ff590f;
      border: 1px solid #ff590f;
    }

    .all {
      position: absolute;
      top: 49px;
      left: 36px;
    }

    .delete {
      position: absolute;
      top: 49px;
      left: 96px;
    }

    .total {
      font-size: 20px;
      font-weight: 600;
      color: #ff590f;
      line-height: 20px;
      position: absolute;
      top: 34px;
      left: 638px;
    }

    .memo {
      font-size: 14px;
      font-weight: 400;
      color: #535353;
      line-height: 14px;
      position: absolute;
      top: 66px;
      left: 638px;
    }

    .go {
      width: 164px;
      height: 48px;
      background: #ffffff;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
      font-weight: 600;
      color: #535353;
      position: absolute;
      top: 32px;
      right: 188px;
      cursor: pointer;
    }

    .service {
      width: 164px;
      height: 48px;
      background: #ff590f;
      display: flex;
      align-items: center;
      color: #ffffff;
      font-size: 16px;
      font-weight: 500;
      position: absolute;
      top: 32px;
      right: 0;
      cursor: pointer;

      .icon {
        width: 18px;
        height: 18px;
        margin-left: 37px;
        margin-right: 8px;
      }
    }
  }
}
</style>
